Chrome DevToolsの拡張による検索アルゴリズム改善サイクルの高速化
https://nota.gyazo.com/be02cf3ccc89c8d016a4cc58d30d4f59
Helpfeel検索アルゴリズムの内部情報を可視化するツールです
アジェンダ
Helpfeel検索アルゴリズムの特徴と課題
Helpfeel DevToolsが何を解決するのか
Chrome DevTools拡張ってどうやるの
Helpfeel DevToolsの設計と実装のポイント
Helpfeel検索アルゴリズムの特徴
クライアントサイド検索
最初に全てのデータセットをダウンロードして、ブラウザ上で検索アルゴリズムを実行
クエリの柔軟な解釈
単なる文字列一致だけでなく、動詞抽出や曖昧検索を駆使 https://gyazo.com/6d964f9c519c28f18259fb4049f534c3
おお〜分かりやすいakix.icon
検索アルゴリズム改善の難しいところ
検索結果の根拠がわからない
https://nota.gyazo.com/2d6d300cabe06cd9ea3889c0e688a107
本番データで検索しないと原因特定が難しい
contactが並び替えるとnotaになってマッチしているの面白いshokai.icon
こりゃわからんなー 増井俊之.icon
なるほど…wakix.icon
いや、並び替えじゃなくてntaとnotaじゃないか？shokai.icon
たぶんそうですね 増井俊之.icon
そうですね。1文字欠損でのマッチですね。 daiiz.icon
なるほどniboshi.icon
こうなったらいいな
Elementsパネルのように検索結果の詳細をDevToolsで見れるといいのでは?
https://nota.gyazo.com/2afec34a5930ce8234824597132ccb9f
↓極めて漠然としたアーキテクチャ図
https://gyazo.com/7955ccd5dbcc33def423e08b9594c58f
Redux DevToolsで学ぶDevTools開発
https://nota.gyazo.com/80b9e65e0f78768b65f06391e9ee6e4b
今回実現したいこととほぼ同じ！
コードを読むとChrome DevToolsの仕組みがわかりそうなのでやっていきましょう
Chrome DevTools登場人物紹介
https://nota.gyazo.com/9c64fc0cb353f0bd9c13f91ede746a0f
https://nota.gyazo.com/9e8dda238716a32a84c9b84d3f2f4c33
Panel: DevToolsに表示されるタブみたいなやつ https://gyazo.com/b17dd947c01bfcb1895eccffb55f698e
Redux DevToolsのアーキテクチャ
※ Redux DevToolsはChrome拡張のv2アーキテクチャですが、現在はv3が推奨されています
Web Pageから直接Panelにメッセージを送ることはできない
Panel上のUIは普通のWebとして実装できる
Redux DevToolsのUIはReactとReduxで実装されている
DevToolsのDevToolsを開いてデバッグできる！
wakix.icon
今一文でDevToolsって5回ぐらい言ってたshokai.icon
https://nota.gyazo.com/1852325214e3497a86535c1a3b48a43d
NetworkパネルみたいにChromeの情報を取得したい時はどうするの?
つまり任意の言語から利用できる
CMコーナー
https://gyazo.com/3830e59abe272dde2322e5b20c0519ba
たいへんかわいらしい表紙 by niboshi.icon
GoでDevTools Protocolを叩いて遊ぶ本です
Helpfeel DevToolsの実装
↓極めて具体的なアーキテクチャ
https://gyazo.com/df3c15887b32edcf791ac6f63adbe528
基本的にRedux DevToolsを踏襲
Reduxは使っていないのでbackground scriptとDevTools Panelの間はPortによるmessage passingでコミュニケーション イベント設計
Helpfeel Devtoolsでは2種類のイベントを定義しています
マッチイベント
code: match.json
{
"type": "MATCH", // マッチイベント
"reason": "PERFECT", // 完全一致
}
検索結果がなぜ表示されているのかの分析等に利用する
ライフサイクルイベント
検索の開始/終了、クエリの前処理完了、etc...
code: lifecycle.json
{
"type": "LIFECYCLE", // マッチイベント
"reason": "QUERY_PREPROCESS/START", // クエリの前処理開始
"query": "スタバ"
}
どのフェーズで問題が起きているのかの特定に利用する
https://gyazo.com/7398d148466e36537b23f06648dc7c66
完成
https://nota.gyazo.com/1c42d250d1047b5c7414a0a8f4229124
検索結果がリアルタイムに可視化される
https://nota.gyazo.com/c709046667f6ec5b1155c9199f6273da
Backgroundでハンドリングされたイベントの様子
DevToolsが開発フローをどう改善したか
Before
意図しない挙動が報告されると、アルゴリズム職人が勘と経験で直していた
検索アルゴリズム内部のどのフェーズで問題が発生しているのかを把握するまでに時間がかかっていた
After
アルゴリズムにそこまで詳しくなくても、検索結果の根拠が分かるようになった
チーム内での検索アルゴリズムの理解が一気に進みましたよね。これはすごかった daiiz.icon
バグ報告から10分で原因特定ができるようになった
簡単な修正であれば1日でPRの作成＆リリースができるようになった
hiroshi.icon めんどくさがりなので console.log() でもいいんじゃない?と思ってしまう
たしかにログ出すだけでも調査できないことはないですねniboshi.icon
ただ検索1回分だけでも割と情報量が多いので、何らかの形で可視化したほうが楽かな〜とは思います
圧倒的成果ですごいakix.icon
すごい 増井俊之.iconminemuracoffee.icontakker.icon
まとめ
Helpfeelの検索アルゴリズムを可視化するChrome DevTools拡張を作っている
DevTools拡張開発はおなじみのWebテクノロジーで開発できて意外とハードルが低い
Redux DevToolsのような本体でイベント発行→DevToolsで可視化というスキームを利用して、Webアプリの挙動が簡単に把握できるようになった
検索アルゴリズムをどんどん改善できるようになってハッピー
補足すると、niboshiさん入社初月（というか2週間ぐらい）で突然このツールが爆誕して開発チームに衝撃が走りましたakix.icon
teramotodaiki.iconのオンボーディングとniboshi.iconの実装力が炸裂してすごいことになってたakix.icon
Helpfeel以外にも応用できる範囲すごそうyosider.iconmgn901.icon増井俊之.icon